{extend name="base" /}
{block name="body"}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">游戏数据概览</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 数据卡片 -->
                <div class="layui-row layui-col-space15">
                    <!-- 总计数据 -->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">总计数据</div>
                            <div class="layui-card-body">
                                <div class="layui-row">
                                    <div class="layui-col-md4">
                                        <div class="data-card">
                                            <h3>新增用户</h3>
                                            <p>{$total.new_users|number_format}</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="data-card">
                                            <h3>新增角色</h3>
                                            <p>{$total.new_roles|number_format}</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md4">
                                        <div class="data-card">
                                            <h3>付费金额</h3>
                                            <p>¥{$total.pay_amount|number_format}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 今日数据 -->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">今日数据</div>
                            <div class="layui-card-body">
                                <div class="layui-row">
                                    <div class="layui-col-md3">
                                        <div class="data-card">
                                            <h3>新增用户</h3>
                                            <p>{$today.new_users|number_format}</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="data-card">
                                            <h3>新增角色</h3>
                                            <p>{$today.new_roles|number_format}</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="data-card">
                                            <h3>登录用户</h3>
                                            <p>{$today.active_users|number_format}</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="data-card">
                                            <h3>付费金额</h3>
                                            <p>¥{$today.pay_amount|number_format}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row" style="margin-top: 15px;">
                                    <div class="layui-col-md6">
                                        <div class="data-card">
                                            <h3>付费率</h3>
                                            <p>{$today.payment_rate}%</p>
                                        </div>
                                    </div>
                                    <div class="layui-col-md6">
                                        <div class="data-card">
                                            <h3>ARPU</h3>
                                            <p>¥{$today.arpu|number_format}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 游戏排行 -->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">今日游戏排行</div>
                            <div class="layui-card-body">
                                <table class="layui-table" lay-filter="gameRankTable" id="sortableTable">
                                    <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>游戏名称</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="new_users">新增用户 ▼</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="new_roles">新增角色 ▼</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="active_users">活跃用户 ▼</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="pay_amount">付费金额 ▼</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="pay_users">付费用户 ▼</th>
                                        <th style="cursor: pointer;color: #44d7f2;" data-sort="pay_times">付费次数 ▼</th>
                                        <th>付费率</th>
                                    </tr>
                                    </thead>
                                    <tbody id="table-tbody">
                                    {volist name="top_games" id="game" key="k"}
                                    <tr>
                                        <td>{$k}</td>
                                        <td>{$game.name}</td>
                                        <td>{$game.new_users}</td>
                                        <td>{$game.new_roles}</td>
                                        <td>{$game.active_users}</td>
                                        <td>{$game.pay_amount}</td>
                                        <td>{$game.pay_users}</td>
                                        <td>{$game.pay_times}</td>
                                        <td>{$game.pay_times}</td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 趋势图表 -->
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">趋势分析</div>
                            <div class="layui-card-body">
                                <div class="layui-tab layui-tab-brief" lay-filter="filter">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this">7日趋势</li>
                                        <li>30日趋势</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <div id="chart7days" style="height: 400px;"></div>
                                        </div>
                                        <div class="layui-tab-item">
                                            <div id="chart30days" style="height: 400px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 ECharts -->
<script src="__JS__/echarts.common.min.js"></script>
{/block}
{block name="script"}
<script>
    layui.use(['jquery', 'element'], function(){
        var $ = layui.jquery;
        var element = layui.element;

        // 初始化图表
        function initChart(domId, title, xData, series){
            console.log(xData);
            console.log(series);
            var chart = echarts.init(document.getElementById(domId));
            var option = {
                title: {
                    text: title,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增用户', '新增角色', '付费金额'],
                    bottom: 10
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            chart.setOption(option);

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                chart.resize();
            });
        }
        // 渲染7日趋势图
        initChart('chart7days', '7日趋势', {$seven_days.date|json_encode|raw}, [
            {
                name: '新增用户',
                type: 'line',
                data: {$seven_days.new_users|json_encode|raw}
            },
            {
                name: '新增角色',
                type: 'line',
                data: {$seven_days.new_roles|json_encode|raw}
            },
            {
                name: '付费金额',
                type: 'line',
                data: {$seven_days.payment|json_encode|raw}
            }
        ]);

        // 渲染30日趋势图
        initChart('chart30days', '30日趋势', {$thirty_days.date|json_encode|raw}, [
            {
                name: '新增用户',
                type: 'line',
                data: {$thirty_days.new_users|json_encode|raw}
            },
            {
                name: '新增角色',
                type: 'line',
                data: {$thirty_days.new_roles|json_encode|raw}
            },
            {
                name: '付费金额',
                type: 'line',
                data: {$thirty_days.payment|json_encode|raw}
            }
        ]);

        // 监听Tab切换
        element.on('tab(filter)', function(data){
            console.log(data);
            if(data.index === 1){
                // 确保30日图表已经初始化
                setTimeout(function(){
                    echarts.getInstanceByDom(document.getElementById('chart30days')).resize();
                }, 0);
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        // 当前排序字段和方向
        var currentSort = '';
        var currentOrder = 'desc';

        // 表头点击事件
        $('#sortableTable th[data-sort]').click(function() {
            var sortField = $(this).data('sort');

            // 如果点击的是当前已排序的字段，则切换排序方向
            if (currentSort === sortField) {
                currentOrder = currentOrder === 'desc' ? 'asc' : 'desc';
            } else {
                // 否则重置为降序
                currentSort = sortField;
                currentOrder = 'desc';
            }

            var url = '{:url("/admin/gameRank")}';
            $.get(url,{sort: sortField, order: currentOrder}).success(function(info) {
                const data = info.data;
                console.log('用户信息:', data);
                if(info.code == 0){
                    // 清空表格内容
                    $('#table-tbody').empty();

                    // 填充新的数据
                    $.each(data, function(k, game) {
                        var row = '<tr>' +
                                '<td>' + (k + 1) + '</td>' +
                                '<td>' + game.name + '</td>' +
                                '<td>' + game.new_users + '</td>' +
                                '<td>' + game.new_roles + '</td>' +
                                '<td>' + game.active_users + '</td>' +
                                '<td>' + game.pay_amount + '</td>' +
                                '<td>' + game.pay_users + '</td>' +
                                '<td>' + game.pay_times + '</td>' +
                                '<td>' + game.payment_rate + '%</td>' +
                                '</tr>';
                        $('#table-tbody').append(row);
                    });
                } else {
                    console.error('获取信息失败:', data.msg);
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error("请求失败:", textStatus, errorThrown);
            });
        });
    });
</script>
<style>
    .data-card {
        background: #fff;
        border-radius: 4px;
        padding: 15px;
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    }
    .data-card h3 {
        font-size: 16px;
        color: #666;
        margin-bottom: 10px;
    }
    .data-card p {
        font-size: 24px;
        color: #333;
        font-weight: bold;
    }
    .layui-card {
        margin-bottom: 15px;
    }
</style>
{/block}